<template>
	<!-- 我的/个人空间 -->
	<view class=" post-management">

		<!-- 导航栏 -->
		<u-navbar class="post-management-nav" :border-bottom="false">
			<view class="nav-center">
				<!-- 标签切换 -->
				<u-subsection :list="tabList" :current="tabIndex" @change="tabChange" active-color="#3B82F6"
					bg-color="#fff"></u-subsection>
			</view>
		</u-navbar>


		<!-- 列表内容 -->
		<swiper class="flex-1 w-full " :current="tabIndex" @animationfinish="animationfinish">
			<swiper-item class="h-full" v-for="(item, index) in tabList" :key="index">
				<scroll-view :ref="'scrollView'+index" class="h-full" :refresher-enabled="refresherList[index]"
					:refresher-triggered="triggeredList[index]" @refresherrefresh="onRefresh(index)" scroll-y
					:scroll-top="scrollTopList[index]" @scrolltolower="reachBottom(index)" @scroll="scroll">
					<!-- 有内容 -->
					<template v-if="tabList[index].postList.length > 0">
						<!-- 资讯列表 -->
						<user-post :list="tabList[index].postList" :operation="true"
							@chooseAction="chooseAction"></user-post>
						<u-loadmore :status="tabList[index].loadStatus"></u-loadmore>
					</template>
					<!-- 无内容 -->
					<template v-else>
						<u-empty text="本来无一物,何处惹尘埃" src="/static/platform/svg/winter.svg" font-size="32" icon-size="320"
							mode="list"></u-empty>
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>
		<u-popup v-model="showPopup" mode="bottom" border-radius="30">
			<view class="operation-tool">
				<view class="head-title">帖子快捷操作</view>
				<u-cell-group class="operation-group" :border="false">
					<u-cell-item title="置顶" :arrow="false" :border-top="false"></u-cell-item>
					<u-cell-item title="修改" :arrow="false" @click="updatePost"></u-cell-item>
					<u-cell-item title="记录" :arrow="false" :border-bottom="false"  @click="postApproveRecord"></u-cell-item>
				</u-cell-group>
				<u-cell-group class="operation-group" :border="false">
					<u-cell-item title="删除" :arrow="false" :border-top="false" :border-bottom="false"
						@click="deletePost"></u-cell-item>
				</u-cell-group>
			</view>
		</u-popup>
		<!-- <view> -->
		<view style="height: 50rpx;"></view>
	</view>
</template>

<script>
	import UserPost from '@/pages/platform/post/user-post.vue'
	export default {
		components: {
			UserPost
		},
		data() {
			return {
				showPopup: false,
				// 导航标签
				tabIndex: 0,
				tabList: [{
						name: "待审",
						loadStatus: 'loadmore',
						status: "0",
						postList: []
					},
					{
						name: "通过",
						loadStatus: 'loadmore',
						status: "1,4",
						postList: []
					},
					{
						name: "拒绝",
						loadStatus: 'loadmore',
						status: "2,3",
						postList: []
					}
				],
				postQueryParam: {
					pageNo: 0,
					pageSize: 10,
					userId: undefined,
					status: "0"
				},
				userId: undefined,
				choosePostId: {},
				postList: [],
				triggeredList: [],
				refresherList: [],
				scrollTopList: []
			}
		},
		computed: {
			loadStatus() {
				return this.tabList[this.tabIndex].loadStatus
			}
		},
		onLoad(options) {
			this.userId = this.postQueryParam.userId = options.uid;
			this.init()
		},
		methods: {
			updatePost() {
				this.showPopup = false
				const url = "/pages/platform/post/post-add?id=" + this.choosePostId
				uni.navigateTo({
					url: url
				})
			},
			postApproveRecord() {
				this.showPopup = false
				const url = "/pages/platform/approve/approve-record?id=" + this.choosePostId
				uni.navigateTo({
					url: url
				})
			},
			deletePost() {
				this.showPopup = false
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否删除改帖子',
					success(res) {
						if (res.confirm === true) {
							let ids = []
							ids.push(that.choosePostId)
							that.$u.api.postData.delete({
								ids: ids
							}).then(res => {
								that.tabList[that.tabIndex].postList.splice(that.tabList[that.tabIndex]
									.postList.findIndex(item => item.id === that.choosePostId), 1)
							})
						}
					}
				})
			},
			chooseAction(postId) {
				this.showPopup = true
				this.choosePostId = postId
			},
			scroll() {},
			onRefresh(index) {
				this.triggeredList.splice(index, 1, true)
				this.resetQuery()
				this.getPostList()
				setTimeout(() => {
					this.triggeredList.splice(index, 1, false);
				}, 500)
			},
			resetQuery() {
				this.postQueryParam.pageNo = 0
				this.tabList[this.tabIndex].loadStatus = "loadmore"
			},
			reachBottom(index) {
				if (this.tabList[this.tabIndex].loadStatus !== 'nomore') {
					this.getNextPostList()
				}
			},
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				if (this.sectionIndex !== e.detail.current) {
					this.tabChange(e.detail.current)
					return
				}
				this.sectionIndex = e.detail.current
			},
			init() {
				this.tabList.forEach(() => {
					this.scrollTopList.push(0)
					this.refresherList.push(true)
					this.triggeredList.push(false)
				})
				this.getPostList()
			},

			getNextPostList() {
				this.postQueryParam.pageNo += 1
				this.$u.api.postData.getPostList(this.postQueryParam).then(res => {
					if (res.data.records.length > 0) {
						this.tabList[this.tabIndex].postList.push(...res.data.records)
						setTimeout(() => {
							this.setLoadStatus(this.tabIndex, res.data.records.length, this.postQueryParam)
						}, 1000)
					} else {
						setTimeout(() => {
							this.tabList[this.tabIndex].loadStatus = "nomore"
						}, 1000)

					}
				})
			},
			getPostList() {
				this.tabList[this.tabIndex].loadStatus = 'loading'
				this.$u.api.postData.getPostList(this.postQueryParam).then(res => {
					this.tabList[this.tabIndex].postList = res.data.records
					this.setLoadStatus(this.tabIndex, res.data.records.length, this.postQueryParam)
				})
			},
			setLoadStatus(index, size, queryParam) {
				if (size < queryParam.pageSize) {
					this.tabList[index].loadStatus = "nomore"
				} else {
					this.tabList[index].loadStatus = 'loadmore'
				}
			},
			imageUrl(itemUrl) {
				return this.handleUrl(itemUrl)
			},
			// tabbar点击
			tabChange(index) {
				this.tabIndex = index
				this.postQueryParam.status = this.tabList[index].status
				this.getPostList()
			}

		}
	}
</script>

<style lang="scss" scoped>
	.post-management {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top) - var(--window-bottom)); // 视高 - 内容区顶部 - 内容区底部
		width: 100%;

		.post-management-nav {
			margin-bottom: 20rpx;

			.nav-center {
				flex: 1;
				margin: 0 20rpx;
			}
		}

		.operation-tool {
			background: #F6F5FA;
			padding: 20rpx;

			.head-title {
				font-size: 14px;
				color: #818181;

			}

			.operation-group {
				background: #fff;
				flex-direction: row;
				justify-content: space-around;
				border-radius: 20rpx;
				margin-top: 20rpx;
				padding: 8rpx 0;
			}
		}
	}
</style>